<script lang="ts" setup>
import { ref } from "vue";
import { PowerList } from "@/components/pages";
import { RoleFormService, RoleTableService } from "./shared/role.service";
const name = "Role";
const myTable = new RoleTableService(name)
const { paging, getPatationList, onSearch, onSelectChange } = myTable.usePagin()

// 表单操作
const myForm = new RoleFormService(name, myTable.resultList.bind(myTable));

const { modelRef, modelRule, onSubmit } = await myForm.useForm();

const showForm = myForm.showForm;

const onAdd = myForm.onAdd.bind(myForm);
const onEdit = myForm.onEdit.bind(myForm);

</script>

<template>
  <div class="user">
    <TableSearch @onAdd="onAdd" tip="搜索权限" v-model:keyword="myTable.keyword.value" @on-search="onSearch">
    </TableSearch>
    <a-table :row-selection="{ selectedRowKeys: paging.selectedRowKeys, onChange: onSelectChange }"
      :dataSource="paging.dataSource" :columns="paging.columns" :pagination="paging.pagination"
      :loading="paging.loading" rowKey="id" @change="getPatationList" tableLayout="fixed"
      :scroll="{ x: 'max-content' }">
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'menu'">
          <div class="flex items-center flex-wrap">{{ record.menu.title }}</div>
        </template>
        <template v-if="column.key === 'action'">
          <div class="flex items-center flex-wrap">
            <a-button class="text-xs" type="primary" size="small" @click="onEdit(record._id)">编辑</a-button>
            <a-popconfirm title="确认删除？" @confirm="myTable.delInfo(record._id)">
              <a-button class="text-xs ml-base" size="small">删除</a-button>
            </a-popconfirm>
          </div>
        </template>
      </template>
    </a-table>
    <a-modal width="540px" v-model:visible="showForm" title="添加权限" @ok="onSubmit">
      <a-form size="small">
        <a-form-item label="名称" name="name" v-bind="modelRule.name">
          <a-input size="large" v-model:value.trim="modelRef.name"></a-input>
        </a-form-item>
        <a-form-item label="编号" name="code" v-bind="modelRule.code">
          <a-input size="large" v-model:value.trim="modelRef.code"></a-input>
        </a-form-item>
        <a-form-item label="说明" name="code">
          <PowerList></PowerList>
        </a-form-item>
        <a-form-item label="说明" name="code" v-bind="modelRule.description">
          <a-textarea size="large" v-model:value.trim="modelRef.description"></a-textarea>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>
